<template>
  <div class="common-table">
    <el-table
      :data="tableData"
      style="width: 100%"
      :loading="loading"
      :empty-text="$t('noData')"
      stripe
      border
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="$t(column.labelKey)"
        :width="column.width"
        :fixed="column.fixed"
        :formatter="column.formatter"
        :sortable="column.sortable"
      >
        <template #default="scope" v-if="column.slot">
          <slot :name="column.slot" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
      
      <el-table-column
        v-if="showActions"
        :label="$t('actions')"
        fixed="right"
        width="200"
      >
        <template #default="scope">
          <slot name="actions" :row="scope.row" :index="scope.$index">
            <el-button
              type="primary"
              size="small"
              @click="$emit('edit', scope.row)"
            >
              {{ $t('edit') }}
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="$emit('delete', scope.row)"
            >
              {{ $t('delete') }}
            </el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      v-if="showPagination"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      :layout="paginationLayout"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
    />
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  showActions: {
    type: Boolean,
    default: true
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  paginationLayout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})

const emit = defineEmits(['edit', 'delete', 'size-change', 'current-change'])

const handleSizeChange = (size) => {
  emit('size-change', size)
}

const handleCurrentChange = (page) => {
  emit('current-change', page)
}
</script>

<style scoped>
.common-table {
  width: 100%;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>